<div class="row" ng-controller="adBarPluginEditorController">
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="title-text" class="control-label col-xs-3">主标题</label>
                <div class="col-xs-9">
                    <input type="text" ng-model="extendOfIndex.TitleText" class="form-control"
                           name="title-text" id="title-text" placeholder="主标题">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="title-text-color" class="control-label col-xs-3">主颜色</label>
                <div class="col-xs-9 color-select-row">
                    <input type="text" ng-model="extendOfIndex.TitleColor" class="form-control"
                           name="title-text-color" id="title-text-color" placeholder="默认"
                           colorpicker colorpicker-parent="true" colorpicker-position="bottom"
                           colorpicker-with-input="true">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="title-sub-text" class="control-label col-xs-3">副标题</label>
                <div class="col-xs-9">
                    <input type="text" ng-model="extendOfIndex.SubTitleText" class="form-control"
                           name="title-sub-text" id="title-sub-text" placeholder="副标题">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="title-sub-color" class="control-label col-xs-3">副颜色</label>
                <div class="col-xs-9 color-select-row">
                    <input type="text" ng-model="extendOfIndex.SubTitleColor" class="form-control"
                           name="title-sub-color" id="title-sub-color" placeholder="默认"
                           colorpicker colorpicker-parent="true" colorpicker-position="bottom"
                           colorpicker-with-input="true">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="title-postion" class="control-label col-xs-3">标题位置</label>
                <div class="col-xs-9">
                    <select class="form-control" name="title-postion" id="title-postion"
                            ng-options="p.value as p.text for p in positionArray"
                            ng-model="extendOfIndex.TitlePosition"></select>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="legend-postion" class="control-label col-xs-3">图例位置</label>
                <div class="col-xs-9">
                    <select class="form-control" name="legend-postion" id="legend-postion"
                            ng-options="p.value as p.text for p in positionArray"
                            ng-model="extendOfIndex.LegendPosition"></select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="value-where-is" class="control-label col-xs-3">值位置</label>
                <div class="col-xs-9">
                    <select class="form-control" name="value-where-is" id="value-where-is"
                            ng-options="p.value as p.text for p in valueWhereArray"
                            ng-model="extendOfIndex.WhichAxisIsValue"></select>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="grid-show-is" class="control-label col-xs-3">网格</label>
                <div class="col-xs-9">
                    <select class="form-control" name="grid-show-is" id="grid-show-is"
                            ng-options="p.value as p.text for p in gridShowArray"
                            ng-model="extendOfIndex.WhichAxisShowGrid"></select>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="x-boundaryGap" class="control-label col-xs-3">X轴留白</label>
                <div class="col-xs-9">
                    <div class="checkbox checkbox-success">
                        <input type="checkbox" id="x-boundaryGap" name="x-boundaryGap"
                               ng-model="extendOfIndex.XboundaryGap">
                        <label for="x-boundaryGap">是</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="y-boundaryGap" class="control-label col-xs-3">Y轴留白</label>
                <div class="col-xs-9">
                    <div class="checkbox checkbox-success">
                        <input type="checkbox" id="y-boundaryGap" name="y-boundaryGap"
                               ng-model="extendOfIndex.YboundaryGap">
                        <label for="y-boundaryGap">是</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="backgournd-color" class="control-label col-xs-3">背景色</label>
                <div class="col-xs-9 color-select-row">
                    <input type="text" ng-model="extendOfIndex.BackgroundColor" class="form-control"
                           name="backgournd-color" id="backgournd-color" placeholder="默认"
                           colorpicker colorpicker-parent="true" colorpicker-position="bottom"
                           colorpicker-with-input="true">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="show-toolbox" class="control-label col-xs-3">工具栏</label>
                <div class="col-xs-9">
                    <div class="checkbox checkbox-success">
                        <input type="checkbox" id="show-toolbox" name="show-toolbox"
                               ng-model="extendOfIndex.IsShowToolbox">
                        <label for="show-toolbox">启用</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="legend-text-color" class="control-label col-xs-3">图例字体颜色</label>
                <div class="col-xs-9 color-select-row">
                    <input type="text" ng-model="extendOfIndex.LegendTextColor" class="form-control"
                           name="legend-text-color" id="legend-text-color" placeholder="默认"
                           colorpicker colorpicker-parent="true" colorpicker-position="bottom"
                           colorpicker-with-input="true">
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="axis-text-color" class="control-label col-xs-3">坐标轴颜色</label>
                <div class="col-xs-9 color-select-row">
                    <input type="text" ng-model="extendOfIndex.AxisTextColor" class="form-control"
                           name="axis-text-color" id="axis-text-color" placeholder="默认"
                           colorpicker colorpicker-parent="true" colorpicker-position="bottom"
                           colorpicker-with-input="true">
                </div>
            </div>
        </div>
    </div>
    <div class="row custom-color">
        <div class="col-xs-12">
            <div class="form-group">
                <div class="row color-check col-xs-2">
                    <div>
                        <label class="control-label">序列颜色</label>
                    </div>
                    <div>
                        <label class="control-label">自定义</label>
                        <input id="customColor" type="checkbox" ng-change="customColor()" ng-model="CustomColor">
                    </div>
                </div>
                <div class="col-xs-10">
                    <div class="row color-list">
                        <li ng-repeat="color in colors">
                            <span ng-click="removeColor(color)" ng-style="{'background-color': color}"></span>
                        </li>
                        <div ng-class="{'color-disable': !CustomColor}">
                        </div>
                    </div>
                    <div class="row color-select-row">
                        <button class="btn btn-default" ng-disabled="!CustomColor" ng-model="addColor" colorpicker
                                colorpicker-parent="true" colorpicker-position="bottom" colorpicker-with-input="true">
                            添加颜色
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row series-settings">
        <div class="panel panel-default">
            <div class="panel-heading">序列设置：
                <select ng-model="currentSeriesOption"
                        ng-change="selectedSeries(currentSeriesOption)"
                        ng-options="series as series.SeriesName for series in extendOfIndex.SeriesOption"></select>
                <button class="btn btn-default" ng-click="addSeries()">新增序列</button>
                <button class="btn btn-default" ng-click="removeSeries()">移除序列</button>
            </div>
            <div class="panel-body" ng-hide="!currentSeriesOption">
                <div class="form-group">
                    <label class="control-label col-xs-3">序列名称</label>
                    <div class="col-xs-9">
                        <input type="text" ng-model="currentSeriesOption.SeriesName" class="form-control">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">序列类型</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="currentSeriesOption.SeriesType"
                                ng-options="t.value as t.text for t in seriesTypeArray"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">绑定数据集</label>
                    <div class="col-xs-9">
                        <select class="form-control"
                                ng-change="bindingChanged(currentBinding)"
                                ng-model="currentBinding"
                                ng-options="b as b.Name for b in bindingOfIndex"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">绑定维度</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="currentSeriesOption.DimensionCode"
                                ng-options="d.Code as d.Name for d in currentBinding.Dimensions"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">绑定度量</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="currentSeriesOption.MeasureCode"
                                ng-options="m.Code as m.Name for m in currentBinding.Measures"></select>
                    </div>
                </div>
                <div class="form-group" ng-hide="currentSeriesOption.SeriesType != 'line'">
                    <label class="control-label col-xs-3">是否面积</label>
                    <div class="col-xs-9">
                        <div class="checkbox checkbox-success">
                            <input type="checkbox" id="series-area" name="series-area"
                                   ng-model="currentSeriesOption.IsAreaStyle">
                            <label for="series-area">启用</label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-xs-3">标签位置</label>
                    <div class="col-xs-9">
                        <select class="form-control" ng-model="currentSeriesOption.LabelPosition"
                                ng-options="p.value as p.text for p in labelPositionArray"></select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-3">堆积分类</label>
                    <div class="col-xs-9">
                        <input type="text" ng-model="currentSeriesOption.SeriesStack" class="form-control"
                               placeholder="无">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row chart-pivot-event">
        <div class="col-xs-6">
            <div class="form-group">
                <label class="control-label col-xs-3">钻取设置</label>
                <div class="col-xs-9">
                    <button class="btn btn-default" ng-click="eventSelect()">序列点击事件</button>
                </div>
            </div>
        </div>
    </div>
</div>